<template>
  <!-- 提示框  信息不完整 -->
  <div class="q-pa-md q-gutter-sm">
    <q-dialog
      v-model="box.isErrRow"
      persistent
      transition-show="scale"
      transition-hide="scale"
    >
      <q-card class="bg-teal text-white" style="width: 300px">
        <q-card-section>
          <div class="text-h6">注意</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          {{ box.errRowData }}
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
  <!-- 提示框  内容错误-->
  <q-dialog v-model="box.boxDialog" position="top">
    <q-card class="bg-pink text-white" style="width: 300px">
      <q-card-section>
        <div class="text-h6">提示</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        请确认格式是否输入正确.
      </q-card-section>
      <!-- <q-linear-progress :value="0.7" color="orange" /> -->
      <q-card-actions align="right" class="bg-white text-teal">
        <div></div>
        <div v-show="true">
          <div class="text-h8 text-grey">例如:（木箱） 300*280*290</div>
          <div class="text-grey">例如:（托盘） 300*290</div>
          <div class="text-grey">可以开启或关闭智能提示</div>
          <div class="text-grey">
            开启智能提示时,输入数量后会自动关闭当前提示框.
          </div>
        </div>
        <q-btn
          flat
          color="primary"
          @click="!box.isDialog"
          label="OK"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <div class="column" style="height: 100%">
    <div style="height: 15px"></div>
    <!-- 表头部分 -->
    <div class="col-1">
      <!-- 表头的输入框和按键 -->
      <q-card flat>
        <!-- 输入框部分 -->
        <div class="q-gutter-md row justify-around">
          <div class="col-0" v-show="!box.isTrue"   >  </div>
            <q-chip v-show="box.isTrue" dense size="lg"  color="teal-9" text-color="white" >确认 </q-chip>

          <q-input
            v-model.trim="box.purchaseOrderId"
            type="text"
            label="系统订单号"
          >
            <template v-slot:append>
              <q-icon name="view_stream" size="80%" />
            </template>
          </q-input>
          <q-input
            v-model.trim="box.yesExport"
            type="text"
            label="内销/外销"
            @blur.native.capture="yesExportIsNorm()"
          >
            <template v-slot:append>
              <q-icon
                :name="
                  box.yesExport == '外销' ? 'directions_boat' : 'local_shipping'
                "
                size="80%"
              />
            </template>
          </q-input>
          <q-input
            v-model.trim="box.customerPurchaseOrderId"
            type="text"
            label="自定义订单号"
          >
            <template v-slot:append>
              <q-icon name="gesture" size="80%" />
            </template>
          </q-input>
          <q-input v-model.trim="box.supplierName" type="text" label="供应商">
            <template v-slot:append>
              <q-icon name="person" size="80%" />
            </template>
          </q-input>

          <!-- <q-input v-model="box.boxPlanDate" type="date" hint="计划交期" /> -->
          <div class="col-0"></div>
        </div>

        <!-- 操作栏 -->
        <div style="height: 15px"></div>
        <div class="row q-gutter-md justify-around">
          <div class="q-gutter-md row items-start justify-around">
            <!-- <div   class=" q-gutter-md row justify-center ">
    <div class=" q-gutter-md  "> -->
            <q-btn-group>
              <q-btn push label="查找" ripple text-color="red-9" />
              <q-btn push label="新增" ripple text-color="teal-9" />
              <q-btn push label="确认" ripple fab-max text-color="orange-10"  @click="box.isTrue=!box.isTrue" />
              <q-btn push label="打印" ripple fab-max text-color="green-10" />
            </q-btn-group>
          </div>

          <!-- 选择框 -->
          <div class="q-pa-md q-gutter-sm tree_font" >修改订单</div>
        </div>
        <!-- 间距 -->
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="green-9" inset size="6px" />
      </q-card>
    </div>

    <!-- 表体部分 -->
    <div class="col-3">
      <!-- 表格 -->
      <q-table
        :rows="box.boxRows"
        :columns="columns"
        virtual-scroll
        hide-pagination
        :rows-per-page-options="[0]"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <div class="title_font">{{ col.label }}</div>
            </q-th>
          </q-tr>
        </template>

        <!-- 表体部分 -->
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="id" :props="props">{{ props.row.id }}</q-td>
            <q-td key="goodsName" :props="props">{{
              props.row.goodsName
            }}</q-td>
            <!-- 产品规格 -->
            <q-td key="goodsSize" :props="props">
              {{ props.row.goodsSize }}
              <q-popup-edit v-model.trim="props.row.goodsSize" v-slot="scope">
                <q-input
                  v-model="props.row.goodsSize"
                  dense
                  autofocus
                  counter
                  @keyup.enter="scope.set"
                  @blur.native.capture="boxGoodsSizeIsNorm(props.row)"
                />
              </q-popup-edit>
              <q-badge
                :color="props.row.goodsSize == '' ? Mycolor[6] : Mycolor[6]"
              >
              </q-badge>
            </q-td>
            <!-- 产品样式 -->
            <q-td key="goodsStyle" :props="props">
              {{ props.row.goodsStyle }}
              <q-popup-edit v-model.trim="props.row.goodsStyle" v-slot="scope">
                <!-- <q-input v-model="props.row.goodsStyle" dense autofocus counter /> -->
                <q-select
                  v-model="props.row.goodsStyle"
                  :options="box.boxOptions"
                ></q-select>
              </q-popup-edit>
              <q-badge
                :color="props.row.goodsStyle == '' ? Mycolor[6] : Mycolor[6]"
              >
              </q-badge>
            </q-td>
            <!-- 订购数量 -->
            <q-td key="purchaseOrderAmount" :props="props">
              {{ props.row.purchaseOrderAmount }}
              <q-popup-edit
                v-model.number="props.row.purchaseOrderAmount"
                v-slot="scope"
              >
                <q-input
                  v-model.number="props.row.purchaseOrderAmount"
                  dense
                  autofocus
                  counter
                  type="number"
                  @keyup.enter="scope.set"
                  @blur.native.capture="box.isHeader = false"
                />
              </q-popup-edit>
              <q-badge
                :color="
                  props.row.purchaseOrderAmount == '' ? Mycolor[6] : Mycolor[6]
                "
              >
              </q-badge>
            </q-td>
            <!-- 适用产品 -->
            <q-td key="forProductName" :props="props"
              >{{ props.row.forProductName }}
              <q-popup-edit v-model="props.row.forProductName" v-slot="scope">
                <q-input
                  v-model="props.row.forProductName"
                  dense
                  autofocus
                  counter
                />
              </q-popup-edit>
            </q-td>
            <!-- 备注信息 -->
            <q-td key="customerMark" :props="props"
              >{{ props.row.customerMark }}
              <q-popup-edit v-model="props.row.customerMark" v-slot="scope">
                <q-input
                  v-model="props.row.customerMark"
                  dense
                  autofocus
                  counter
                />
              </q-popup-edit>
            </q-td>
            <!-- 操作 .trim-->
            <q-td key="id" :props="props">
              <q-btn
                icon="delete"
                @click.stop="boxRowDelete(props.row)"
                dense
                flat
                push
                class="but_float"
              />
            </q-td>
          </q-tr>
        </template>
      </q-table>
      <!-- 表格 -->
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRaw, onMounted } from "vue";
import {
  getStockReport,
  getPurchaseOrderIdList,
  getMaxpurchaseOrderId,
  insertPurchaseOrder,
} from "../../API/PurchaseOrder/insertPurchaseOrderAPI";
import { addAnyID } from "../../utils/goodsTools";
import { cards_data, columns } from "../../utils/defaultData";

export default {
  data() {
    //获取获取当前库存量
    onMounted(function () {
      box.cards_data.length = 0;
      aa();
      bb();
      cc();
      async function aa() {
        var res = await getStockReport();
        console.log(res.data);
        box.cards_data = res.data;
      }
      async function bb() {
        var res = await getPurchaseOrderIdList();
        console.log(res.data);
        box.purchaseOrderIdList = res.data;
      }
      async function cc() {
        var res = await getMaxpurchaseOrderId();
        console.log(res.data);
        box.purchaseOrderId = addAnyID(res.data[0].purchaseOrderId, "PO");
      }
    });

    //提交订单信息
    function UIinsertPurchaseOrder() {
      // 第一步 检查信息是否输入完整
      for (let index = 0; index < toRaw(box.boxRows).length; index++) {
        if (
          toRaw(box.boxRows)[index].goodsSize != "" ||
          toRaw(box.boxRows)[index].purchaseOrderAmount != ""
        ) {
          if (
            toRaw(box.boxRows)[index].goodsSize == "" ||
            toRaw(box.boxRows)[index].goodsStyle == "" ||
            toRaw(box.boxRows)[index].purchaseOrderAmount == ""
          ) {
            box.isErrRow = true;
            box.errRowData = `普通木箱表的  第${
              index + 1
            }行  信息不完整,请完善!~`;

            return;
          }
        }
      }
      for (let index = 0; index < toRaw(box.SMRRows).length; index++) {
        if (
          toRaw(box.SMRRows)[index].goodsSize != "" ||
          toRaw(box.SMRRows)[index].purchaseOrderAmount != ""
        ) {
          if (
            toRaw(box.SMRRows)[index].goodsSize == "" ||
            toRaw(box.SMRRows)[index].goodsStyle == "" ||
            toRaw(box.SMRRows)[index].purchaseOrderAmount == ""
          ) {
            box.isErrRow = true;
            box.errRowData = `SMR木箱表的  第${
              index + 1
            }行  信息不完整,请完善!~`;
            return;
          }
        }
      }
      for (let index = 0; index < toRaw(box.trayRows).length; index++) {
        if (
          toRaw(box.trayRows)[index].goodsSize != "" ||
          toRaw(box.trayRows)[index].purchaseOrderAmount != ""
        ) {
          if (
            toRaw(box.trayRows)[index].goodsSize == "" ||
            toRaw(box.trayRows)[index].goodsStyle == "" ||
            toRaw(box.trayRows)[index].purchaseOrderAmount == ""
          ) {
            box.isErrRow = true;
            box.errRowData = `托盘表的  第${index + 1}行  信息不完整,请完善!~`;
            return;
          }
        }
      }
      // 第二步 将表头信息加入表身的每一行.
      const boxArr = toRaw(box.boxRows).filter((val, index) => {
        val["yesExport"] = box.yesExport;
        val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        val["supplierName"] = box.supplierName;
        val["purchaseOrderId"] = box.purchaseOrderId;
        val["boxPlanDate"] = box.boxPlanDate;
        return (
          val.goodsSize != "" &&
          val.goodsStyle != "" &&
          val.purchaseOrderAmount != ""
        );
      });
      const SMRArr = toRaw(box.SMRRows).filter((val) => {
        val["yesExport"] = box.yesExport;
        val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        val["supplierName"] = box.supplierName;
        val["purchaseOrderId"] = box.purchaseOrderId;
        val["boxPlanDate"] = box.boxPlanDate;
        return (
          val.goodsSize != "" &&
          val.goodsStyle != "" &&
          val.purchaseOrderAmount != ""
        );
      });
      const trayArr = toRaw(box.trayRows).filter((val) => {
        val["yesExport"] = box.yesExport;
        val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        val["supplierName"] = box.supplierName;
        val["purchaseOrderId"] = box.purchaseOrderId;
        val["boxPlanDate"] = box.boxPlanDate;
        return (
          val.goodsSize != "" &&
          val.goodsStyle != "" &&
          val.purchaseOrderAmount != ""
        );
      });
      let insertData = boxArr.concat(SMRArr, trayArr);
      console.log(insertData);
      dd(insertData);
      async function dd(insertData) {
        var res = await insertPurchaseOrder(insertData);
        console.log(res.data);
      }
    }

    // 内销外销是否正确
    function yesExportIsNorm() {
      if (box.yesExport != "内销" && box.yesExport != "外销") {
        alert("只能输入‘内销’或者‘外销’不能输入其他内容！");
        box.yesExport = "";
      }
    }
    // 智能即时库存
    function nowStock(rowData) {
      console.log("智能即时库存", rowData);
      //第一步  看看是否开启了 智能提示  isPrompts
      //第二步  获取产品分类 (box SMR tray )#C2185B
      if (box.isPrompts) {
        if (rowData.goodsName == "普通木箱") {
          box.isHeader = true;
          box.cards_data = cards_data;
          box.cardBackground = { "background-color": "#C2185B" };
        }

        if (rowData.goodsName == "SMR木箱") {
          box.isHeader = true;
          box.cardBackground = { "background-color": "#00796B" };
        }
        if (rowData.goodsName == "托盘") {
          box.isHeader = true;
          box.cardBackground = { "background-color": "#F57C00" };
        }
      }
    }
    // 格式是否错误
    function boxGoodsSizeIsNorm(r) {
      // console.log("当前输入行的id__", toRaw(r).id);
      var re = new RegExp(
        "^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$"
      );
      if (!re.test(toRaw(r).goodsSize)) {
        box.boxDialog = !box.boxDialog;
        box.boxRows[toRaw(r).id - 1].goodsSize = "";
        return;
      } else {
        // 调用智能检查函数,显示当前库存信息
        nowStock(toRaw(r));
      }
      if (box.boxRows[box.boxRows.length - 1].goodsSize != "") {
        boxAddRows();
      }
    }
    function SMRGoodsSizeIsNorm(r) {
      var re = new RegExp(
        "^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$"
      );
      if (!re.test(toRaw(r).goodsSize)) {
        box.boxDialog = !box.boxDialog;
        box.SMRRows[toRaw(r).id - 1].goodsSize = "";
        return;
      } else {
        // 调用智能检查函数
        nowStock(toRaw(r));
      }
      if (box.SMRRows[box.SMRRows.length - 1].goodsSize != "") {
        SMRAddRows();
      }
    }
    function trayGoodsSizeIsNorm(r) {
      var re = new RegExp("^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$");
      if (!re.test(toRaw(r).goodsSize)) {
        box.boxDialog = !box.boxDialog;
        box.trayRows[toRaw(r).id - 1].goodsSize = "";
        return;
      } else {
        // 调用智能检查函数
        nowStock(toRaw(r));
      }
      if (box.trayRows[box.trayRows.length - 1].goodsSize != "") {
        trayAddRows();
      }
    }
    // 增加一行
    function boxAddRows() {
      var map = {
        id: 0,
        goodsName: "普通木箱",
        goodsSize: "",
        goodsStyle: "",
        purchaseOrderAmount: "",
        forProductName: "",
        customerMark: "",
      };
      map.id = box.boxRows[box.boxRows.length - 1].id + 1;
      // map.id = box.boxRows.length + 1;
      box.boxRows.push(map);
    }
    function SMRAddRows() {
      var map = {
        id: 0,
        goodsName: "SMR木箱",
        goodsSize: "",
        goodsStyle: "",
        purchaseOrderAmount: "",
        forProductName: "",
        customerMark: "",
      };
      map.id = box.SMRRows.length + 1;
      box.SMRRows.push(map);
    }
    function trayAddRows() {
      var map = {
        id: 0,
        goodsName: "托盘",
        goodsSize: "",
        goodsStyle: "",
        purchaseOrderAmount: "",
        forProductName: "通用",
        customerMark: "",
      };
      map.id = box.trayRows.length + 1;
      box.trayRows.push(map);
    }

    // 删除一行
    function boxRowDelete(row) {
      if (box.boxRows.length > 1) {
        box.boxRows.splice(toRaw(row).id - 1, 1);
        box.boxRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }
    function SMRRowDelete(row) {
      if (box.SMRRows.length > 1) {
        box.SMRRows.splice(toRaw(row).id - 1, 1);
        box.SMRRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }
    function trayRowDelete(row) {
      if (box.trayRows.length > 1) {
        box.trayRows.splice(toRaw(row).id - 1, 1);
        box.trayRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }

    return {
      box,
      columns,
      boxAddRows,
      SMRAddRows,
      trayAddRows,
      boxCustomize,
      SMRCustomize,
      trayCustomize,
      Mycolor: ["red", "green", "purple", "orange", "primary", "teal", "white"],
      boxRowDelete,
      SMRRowDelete,
      trayRowDelete,
      yesExportIsNorm,
      boxGoodsSizeIsNorm,
      SMRGoodsSizeIsNorm,
      trayGoodsSizeIsNorm,
      UIinsertPurchaseOrder,
    };
  },
};

const boxCustomize = ref([
  {
    label: "普通木箱",
    children: [
      {
        label: "",
        header: "generic",
      },
    ],
  },
]);
let SMRCustomize = ref([
  {
    label: "SMR木箱",
    children: [
      {
        label: "",
        header: "generic",
      },
    ],
  },
]);
let trayCustomize = ref([
  {
    label: "托盘",
    children: [
      {
        label: "",
        header: "generic",
      },
    ],
  },
]);
const box = reactive({
  isTrue:false,   //确认
  isHeader: false, //智能提示卡片
  isPrompts: false, //开启智能提示
  boxDialog: false,
  isDialog: false, //输入错误消息框
  isErrRow: false, //输入不完整消息框
  errRowData: null, //输入不完整消息框内容
  boxIsShow: true,
  SMRIsShow: true,
  trayIsShow: true,
  yesExport: "内销",
  boxPlanDate: "2022/12/12",
  goods: "",
  goodsSize: null,
  goodsStyle: "分块叠高",
  purchaseOrderAmount: null,

  customerPurchaseOrderId: "domesticPurchaseOrderId01",
  purchaseOrderId: "purchaseOrderId001",
  forProductName: "forProductName01",
  customerMark: "customerMark01",
  supplierName: "supplierName001",
  boxRows: [
    {
      id: 1,
      goodsName: "普通木箱",
      goodsSize: "100*100*100",
      goodsStyle: "分块叠高",
      purchaseOrderAmount: "1",
      forProductName: "aa",
      customerMark: "aa",
    },
    {
      id: 2,
      goodsName: "普通木箱",
      goodsSize: "200*200*200",
      goodsStyle: "整条叠高",
      purchaseOrderAmount: "2",
      forProductName: "bb",
      customerMark: "",
    },
    {
      id: 3,
      goodsName: "普通木箱",
      goodsSize: "300*300*300",
      goodsStyle: "",
      purchaseOrderAmount: "",
      forProductName: "",
      customerMark: "",
    },
  ],
  SMRRows: [
    {
      id: 1,
      goodsName: "SMR木箱",
      goodsSize: "100*100*100",
      goodsStyle: "分块叠高",
      purchaseOrderAmount: "4",
      forProductName: "aa",
      customerMark: "aa",
    },
    {
      id: 2,
      goodsName: "SMR木箱",
      goodsSize: "200*200*200",
      goodsStyle: "",
      purchaseOrderAmount: "5",
      forProductName: "bb",
      customerMark: "",
    },
    {
      id: 3,
      goodsName: "SMR木箱",
      goodsSize: "300*300*300",
      goodsStyle: "整条叠高",
      purchaseOrderAmount: "6",
      forProductName: "",
      customerMark: "",
    },
  ],
  trayRows: [
    {
      id: 1,
      goodsName: "托盘",
      goodsSize: "66*66",
      goodsStyle: "有",
      purchaseOrderAmount: "7",
      forProductName: "通用",
      customerMark: "",
    },
    {
      id: 2,
      goodsName: "托盘",
      goodsSize: "77*77",
      goodsStyle: "无",
      purchaseOrderAmount: "8",
      forProductName: "通用",
      customerMark: "",
    },
    {
      id: 3,
      goodsName: "托盘",
      goodsSize: "88*88",
      goodsStyle: "无",
      purchaseOrderAmount: "",
      forProductName: "通用",
      customerMark: "",
    },
  ],
  boxOptions: ["分块叠高", "整条叠高", "实木"],
  trayOptions: ["有盖板", "无盖板"],
  cards_data: [],
  cardBackground: { "background-color": "#292845;" },
  purchaseOrderIdList: [],
  // SMRRowNumber:0,
  // trayRowNumber:0,
});
</script>
<style>
.tree_font {
  font: 35px sans-serif;
  color:#2E7C32;
  font-family:"方正舒体","幼圆";
  font-weight: bolder;
}
.table_width {
  width: 96%;
}
.title_font {
  color: rgb(17, 17, 19);
  font-size: 14px;
  font-weight: bolder;
}
.but_float {
  margin-right: 2%;
  float: right;
}
.card_a {
  background-color: rgb(236, 236, 243);
  height: 80px;
}
.title_font2 {
  font-size: 18px;
  font-weight: bolder;
}
.bar_width {
  width: 80%;
}
.my-card {
  width: 70%;
  height: 140px;
}
</style>
